<script setup>
    import { reactive,ref,toRef,toRefs } from 'vue'

    /**
     * reactive
     */
    //  普通对象不具有响应式
    // const user = {
    //     name:'tom',
    //     age:20
    // }
    // 创建响应式的数据对象，是一个代理对象
    const user = reactive({
        name:'tom',
        age:20
    })

    const change = function(){
        // console.log(this) // 无法访问this，因为setup中的this是undefined
        user.name = 'jerry'
    }

    /**
     * ref
     */
    // 创建响应式的数据对象
    const count = ref(0) // {value:0}
    // console.log(count.value)

    const modify = function(){
        count.value = 8
    }

    /**
     * toRef
     */
    const ageRef = toRef(user,'age')

    /**
     * toRefs
     */
    const userRef = toRefs(user)
    const {name,age} = userRef // 对象的解构赋值



</script>

<template>  
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <!-- 在模板中访问时，无需添加.value，会自动展开 -->
    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
    <hr>

    <p>{{  ageRef }}</p>
    <p>{{  user.age }}</p>
    <button @click="ageRef++">修改ageRef</button>
    <button @click="user.age++">修改user.age</button>
    <hr>

    <p>{{ name }}</p>
    <p>{{ user.name }}</p>
    <button @click="name='jack'">修改name</button>
    <button @click="user.name='alice'">修改user.name</button>


</template>

<style scoped>

</style>